<template>
  <div id="sendADelivery">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <el-form-item label="选择类型:" prop="resource">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="发货"></el-radio>
          <el-radio label="送货"></el-radio>
          <el-radio label="虚拟"></el-radio>
        </el-radio-group>
      </el-form-item>
      <div v-if="ruleForm.resource == '发货'">
        <el-form-item label="发货类型:" prop="resource">
          <el-radio-group v-model="ruleForm.manual">
            <el-radio label="手动填写"></el-radio>
            <el-radio label="电子面单打印"></el-radio>
          </el-radio-group>
        </el-form-item>

        <el-form-item
          label="快递公司:"
          prop="region"
          :rules="[{ required: true, message: '区域不能为空' }]"
        >
          <el-select v-model="ruleForm.region" placeholder="请选择">
            <el-option
              :label="item.name"
              :value="item.code"
              v-for="(item, index) in list1"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <div v-if="ruleForm.manual == '手动填写'">
          <el-form-item
            label="快递单号:"
            prop="orderNo"
            :rules="[{ required: true, message: '单号不能为空' }]"
          >
            <el-input
              v-model="ruleForm.orderNo"
              placeholder="请输入快递单号"
            ></el-input>
          </el-form-item>
        </div>
        <div v-else>
          <el-form-item
            label="电子面单:"
            prop="surfaceSingle"
            :rules="[{ required: true, message: '区域不能为空' }]"
          >
            <el-select v-model="ruleForm.surfaceSingle" placeholder="请选择">
              <el-option
                :label="item.name"
                :value="item.code"
                v-for="(item, index) in list1"
                :key="index"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label="寄件人姓名:"
            prop="theSenderName"
            :rules="[{ required: true, message: '寄件人姓名不能为空' }]"
          >
            <el-input
              v-model="ruleForm.theSenderName"
              placeholder="请输入寄件人姓名"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="寄件人电话:"
            prop="theSenderPhone"
            :rules="[{ required: true, message: '寄件人电话不能为空' }]"
          >
            <el-input
              v-model="ruleForm.theSenderPhone"
              placeholder="请输入寄件人电话"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="寄件人地址:"
            prop="theSenderAdress"
            :rules="[{ required: true, message: '寄件人地址不能为空' }]"
          >
            <el-input
              v-model="ruleForm.theSenderAdress"
              placeholder="请输入寄件人地址"
            ></el-input>
          </el-form-item>
        </div>
      </div>

      <!-- 如果是送货 -->
      <div v-if="ruleForm.resource == '送货'">
        <el-form-item
          label="送货人姓名:"
          prop="deliverymanName"
          :rules="[{ required: true, message: '请输入送货人姓名' }]"
        >
          <el-input
            v-model="ruleForm.deliverymanName"
            placeholder="请输入送货人姓名"
          ></el-input>
        </el-form-item>
        <el-form-item
          label="送货人电话:"
          prop="deliverymanPhone"
          :rules="[{ required: true, message: '请输入送货人电话' }]"
        >
          <el-input
            v-model="ruleForm.deliverymanPhone"
            placeholder="请输入送货人电话号"
          ></el-input>
        </el-form-item>
      </div>
      <!-- 如果是模拟 -->
      <div v-if="ruleForm.resource == '虚拟'"></div>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "sendADelivery",
  props: {
    list1: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
  data() {
    return {
      ruleForm: {
        region: "",
        resource: "发货",
        manual: "手动填写",
        orderNo: "",
        deliverymanPhone: "", //送货人电话
        deliverymanName: "", //送货人姓名
        theSenderName: "", //寄件人姓名
        theSenderPhone: "", //寄件人电话
        theSenderAdress: "", //寄件人地址
        surfaceSingle: "", //电子面单
      },
    };
  },

  watch: {
    //监听手动还是电子的
    ruleForm: {
      handler(val) {
        this.$mitt.emit("sendShop", val);
      },
      deep: true,
    },
  },
};
</script>

<style scoped>
</style>